import React, { useState } from 'react';
import { Input, Button, List } from 'antd';
import styles from './ChatWindow.module.css';

const ChatWindow: React.FC = () => {
    const [messages, setMessages] = useState<{ text: string; type: 'user' | 'bot' }[]>([]);
    const [inputValue, setInputValue] = useState('');

    const handleSend = () => {
        if (inputValue.trim()) {
            setMessages([...messages, { text: inputValue, type: 'user' }]);
            setInputValue('');
            // 这里可以调用 API 发送消息
            // 模拟机器人回复
            setTimeout(() => {
                setMessages((prev) => [...prev, { text: '这是机器人的回复', type: 'bot' }]);
            }, 1000);
        }
    };

    return (
        <div className={styles.chatWindow}>
            <List
                className={styles.messageList}
                bordered={false}
                dataSource={messages}
                renderItem={(item) => (
                    <div className={`${styles.messageBubble} ${styles[item.type]}`}>
                        {item.text}
                    </div>
                )}
            />
            <div className={styles.inputContainer}>
                <Input
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                    onPressEnter={handleSend}
                    placeholder="输入消息..."
                />
                <Button type="primary" onClick={handleSend}>
                    发送
                </Button>
            </div>
        </div>
    );
};

export default ChatWindow; 